﻿@{
    ViewBag.Title = "" + FOResource.UI.Layout.lblcreditcard + "";
    ViewBag.Description = "VnBankNet giúp bạn so sánh và tìm ra thẻ tín dụng phù hợp với nhu cầu của bạn";
    Layout = "~/Views/Shared/_SUBLayout1.cshtml";
    var CardProperties = (List<FOModels.Card.CardProperties>)ViewBag.CardProperties;
    var CreditCard = (List<FOModels.Card.CreditCard>)ViewBag.CreditCard;
    var ProDes = (FOModels.Product.ProductModels)ViewBag.ProDes;
}

<style type="text/css">
    #vn-box {
        margin-left: 20px;
    }
</style>
<script type="text/javascript">

    function number_format(number, decimals, dec_point, thousands_sep) {

        var n = number, c = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals;
        var d = dec_point == undefined ? "," : dec_point;
        var t = thousands_sep == undefined ? "." : thousands_sep, s = n < 0 ? "-" : "";
        var i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;

        return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
    }
    var lang = $("#CurrentLangCode").html();
    if(lang=='vi-VN')
    {
        $.tablesorter.addParser({ 
            // set a unique id 
            id: 'numeric', 
            is: function(s) { 
                // return false so this parser is not auto detected 
                return false; 
            }, 
            format: function(s) { 
                // format your data for normalization
                if(s.replace(".","").replace(".","") > 0)
                    return s = s.replace(".","").replace(".",""); 
                else
                    return s=0;
            }, 
            // set type, either numeric or text 
            type: 'numeric' 
        }); 
    }
    else
    {
        $.tablesorter.addParser({ 
            // set a unique id 
            id: 'numeric', 
            is: function(s) { 
                // return false so this parser is not auto detected 
                return false; 
            }, 
            format: function(s) { 
                // format your data for normalization 
                if(s.replace(",","").replace(",","") > 0)
                    return s = s.replace(",","").replace(",",""); 
                else
                    return s=0;
     
            }, 
            // set type, either numeric or text 
            type: 'numeric' 
        }); 
    }
    $(function() { 
        $("#product-table").tablesorter({headers: { 3:{sorter:'numeric'} , 5: { sorter: false }, 1: { sorter: false }, 2: { sorter: false }} ,widthFixed: true, widgets: ['zebra']});
    });
</script>
<div id="v3HomeBody">
    <div class="bread_crumb">
        <ul>
            <li><a href="/" class="bread_arrow" title="@FOResource.UI.Layout.lblhome">@FOResource.UI.Layout.lblhome</a></li>
            <li><a href="@Url.Action("Index", "CreditCard")" class="bread_arrow" title="@FOResource.UI.Layout.lblcreditcard">@FOResource.UI.Layout.lblcreditcard</a></li>
            <li class="lastli"><a href="@Url.Action("Index", "CreditCard")" class="bold" title="@FOResource.UI.Layout.lblchooseproduct">@FOResource.UI.Layout.lblchooseproduct</a></li>
        </ul>
    </div>
    <!--Close Bread crumb-->

    <!--Open Top Slider-->
    <div class="top_slider" id="afocus">
        <ol class="top_bar">
            <li style="width: 164px;"><a href="@Url.Action("Index", "CreditCard")" class="active" id="show_div"><span style="left: -13px;">@FOResource.UI.Layout.lblchoose</span></a> </li>
            <li style="width: 164px;"><a class="bar_2"><span style="left: -13px;">@FOResource.UI.Layout.lblinfo</span></a></li>
            <li style="width: 60px;"><a class="bar_3"><span style="left: -13px;">@FOResource.UI.Layout.lblcontract</span></a></li>
        </ol>
        <span class="h1replace">@FOResource.UI.Layout.lblsologancreditcard</span>

    </div>
    <div class="clear"></div>
    <div id="credit-card-calculator">
        <div id="calculator-form">
            <div id="val-credit-card" rel="0"></div>
            <h3>@FOResource.UI.Layout.lbltypecreditcard</h3>
            <div id="radio-wrapper">

                <label>
                    <input type="radio" id="all-option" class="reward" checked="checked" onclick="ajaxcreditcard(0);" name="card_types" value="0" />
                    @FOResource.UI.Product.Card.lblall</label>
                @if (CardProperties.Count > 0)
                {
                    foreach (var cardpro in CardProperties)
                    {
                    <label>
                        <input type="radio" id="card-properties-@cardpro.CardPropertiesID" class="reward" name="card_types" onclick="ajaxcreditcard('@cardpro.CardPropertiesID    ');" value="@cardpro.CardPropertiesID" />
                        @cardpro.CardPropertiesName</label>
                    }
                }
            </div>
        </div>
        <div id="more-options">
            <h3>@FOResource.UI.Layout.lblcreditcard</h3>
            <ol>
                <li>@FOResource.UI.Product.Card.lblslogan</li>
                <li>@FOResource.UI.Product.Card.lblslogan1</li>
            </ol>
            <div class="social-like">
                <div class="vnlike-fb">
                    <div class="fb-like" data-href="@Request.Url.AbsoluteUri" data-width="450" data-layout="button_count" data-show-faces="true" data-send="true"></div>
                </div>
                <div class="vnlike-google">
                    <div class="g-plusone" data-size="medium" data-href="@Request.Url.AbsoluteUri"></div>
                </div>
            </div>
        </div>
        <div class="clr"></div>

    </div>
    <table class="product-table" id="product-table">
        <thead>
            <tr>
                <th style="width: 20%;">@FOResource.UI.Product.Card.lblbank</th>
                <th style="width: 21%;">@FOResource.UI.Product.Card.lblbenefit</th>
                <th style="width: 21%;">@FOResource.UI.Product.Card.lblfeatures</th>
                <th style="width: 10%;">@FOResource.UI.Product.Card.cosperyear</th>
                <th style="width: 12%;">@FOResource.UI.Product.Deposit.interest<br />@FOResource.UI.Product.Deposit.peryear</th>
                <th style="width: 13%;">@FOResource.UI.Product.Card.lblapply1</th>
            </tr>
        </thead>

        @if (CreditCard.Count > 0)
        {
            foreach (var cre in CreditCard)
            {
            <tr>
                <td class="td-bank">
                    <a title="@FOResource.UI.Layout.viewdetail" href="@Url.Action("Detail", "CreditCard", new { CompanyName = FO.Models.Conver.ConvertToUnSign(cre.CompanyName).ToLower(), CardName = FO.Models.Conver.ConvertToUnSign(cre.CardName).ToLower(), CardID = cre.CardID })">
                        <img alt="@cre.CardName" src="@Url.Content("~/Content/UpLoad/Images/" + @cre.CardImage + "")" /></a>
                    <p class="bank-title"><a title="@FOResource.UI.Layout.viewprobyprovider - @cre.CompanyName" href="@Url.Action("CardsByProvider", "CreditCard", new { CompanyName = FO.Models.Conver.ConvertToUnSign(cre.CompanyName).ToLower(), CompanyID = cre.CompanyID })">@cre.CompanyName</a> @cre.CardName</p>

                </td>
                <td>
                    <div class="item-list">
                        @Html.Raw(@cre.BenefitContent)
                    </div>
                </td>
                <td>
                    <div class="item-list">
                        @Html.Raw(@cre.FurtureContent)
                    </div>
                </td>
                <td class="td-bank">
                    @if (cre.Cost > 0)
                    {
                        <p id="test" class="highlight-blue text-p">@String.Format("{0:0,0}", cre.Cost)</p>
                       
                    }
                    else
                    {
                        <p class="highlight-blue text-p">-</p>
                    }
                </td>
                <td class="td-bank">
                    @if (cre.Interest > 0)
                    {
                        <p class="highlight-blue text-p">@cre.Interest.ToString().Replace(".", "" + FOResource.UI.Layout.currency1 + "") %</p>
                    }
                    else
                    {
                        <p class="highlight-blue text-p">-</p>
                    }
                </td>
                <td class="td-btn">
                    @Html.ActionLink("" + FOResource.UI.Product.Card.lblapply + "", "CreditCardInfo", "CreditCard", new { CardID = cre.CardID }, new { @class = "btn-app", rel = "" + cre.CardID + "" })
                    <a href="#@FO.Models.Conver.ConvertToUnSign(cre.CardName).ToLower()-@cre.CardID" class="more-link" onclick="return viewmore(this)" title="@FOResource.UI.Layout.moreinfo">@FOResource.UI.Layout.moreinfo</a>
                </td>

            </tr>
              
            <tr id="@FO.Models.Conver.ConvertToUnSign(cre.CardName).ToLower()-@cre.CardID" class="more-info" style="display:none;">
                <td colspan="6">
                    <div class="more-info-top">
                        <div class="more-info-wrapper">
                            <h4>@FOResource.UI.Product.Card.lblbenefit &amp; @FOResource.UI.Product.Card.lblfeatures</h4>
                            <div class="item-list">
                                @Html.Raw(cre.MoreBenefit)
                            </div>
                        </div>
                        <div class="more-info-wrapper">
                            <h4>@FOResource.UI.Layout.fee</h4>
                            <div class="item-list">
                                @Html.Raw(cre.MoreFee)
                            </div>

                        </div>
                        <div class="more-info-wrapper">
                            <h4>@FOResource.UI.Layout.Conditionsforcardissuing</h4>
                            <div class="item-list">
                                @Html.Raw(cre.MoreInfo)

                            </div>
                        </div>
                    </div>
                </td>
            </tr>

            }
        }

    </table>

    <!--Close Form Info-->
    <div class="bot-main">
        <div class="bottom_tabbed" style="float: left; width: 960px; margin-bottom: 30px;">
            <div class="bottom_center">
                @Html.Raw(ProDes.Description)
            </div>
            <div class="clr"></div>
            <p id="vnquestion-fb">@FOResource.UI.Layout.cmt</p>
            <div style="float: left;">

                <div class="clr"></div>
                <div id="fb-root"></div>
                <div class="fb-comments" data-href="@Request.Url.AbsoluteUri" data-width="645" style="margin-right:10px;"></div>
            </div>

            <div style="float: left;">

                <div id="vnbanknet-facebook" style="margin: 0;">
                    <div class="fb-like-box" data-href="http://facebook.com/vnbanknet" data-width="300" data-height="270" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
                </div>
            </div>

        </div>

        <div class="clr"></div>
    </div>
</div>
